import React, { Component, PropTypes} from 'react';
import { message, Table, Row, Button, Modal, Form, Input, Checkbox, Tooltip, Icon, Radio } from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const createForm = Form.create;
import * as m from '../../services/todos';

class StockContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [
      ],
      total: 0,
      visible: false
    };
  };

  componentDidMount = () => {
    this.loadStock();
  };

  // 加载表单
  loadStock(page) {
    
    page = page || 1;
    
    m.getAll(page).then(({ jsonResult }) => {
      
      this.setState({
        list: jsonResult.data,
        total: jsonResult.total
      });
    })
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = () => {
    this.setState({
      loading: true
    });
    m.addAttStock(this.props.form.getFieldsValue()).then(()=>{
      this.setState({
        visible: false,
        loading: false
      });
      this.loadStock();
      message.success('操作成功');
    })
  };

  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  delUserStock = (userId, stockCode) => {
    console.log(userId, stockCode);
    message.error('操作失败');
  }

  handleSubmit = () => {}

  render = () => {

    var self = this;

    const columns = [
      {
        title: '股票代码',
        dataIndex: 'stock_code'
      },
      {
        title: '操作',
        render: (text, record) => (
            <span>
              <a href="javascript:">删除</a>
            </span>
        ),
      }


    ];

    const { getFieldProps } = this.props.form;

    let pagination = {
      total: self.state.total,
      onChange(current) {
        self.loadStock(current);
        console.log(self.state.total);
        console.log('Current: ', current);
      }
    };

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14},
    };

    return (
        <div>
          <Row>
            <Button onClick={this.showModal}>新增</Button>
          </Row>
          <Row>
            <Table columns={columns} dataSource={this.state.list} pagination={pagination}/>
          </Row>
          <Modal title="新增股票"
                 visible={this.state.visible}
                 onOk={this.handleOk}
                 onCancel={this.handleCancel}
                 footer={[
                    <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>返 回</Button>,
                    <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>提 交</Button>
                 ]}
          >
            <Form horizontal form={this.props.form}>
              <FormItem
                  {...formItemLayout}
                  label="股票代码"
              >
                <Input {...getFieldProps('stock_code', {initialValue: '000000'})} type="text" autoComplete="off" />
              </FormItem>
            </Form>
          </Modal>
        </div>

    )
  }
}

StockContainer = createForm()(StockContainer);

export default StockContainer;
